<template>
    <div>
        <h1>查看考勤详情</h1>
        <el-card>
            <div>课程名称：{{ courseInfo.courseName }}</div>
            <div>周次：第{{ courseInfo.week }}周</div>
            <div>星期几：周{{ courseInfo.day }}</div>
            <div>节次：{{ courseInfo.startPeriod }} - {{ courseInfo.endPeriod }}节</div>
        </el-card>

        <el-table :data="studentList" style="margin-top: 20px;">
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="number" label="学号" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="status" label="出勤状态" />
        </el-table>
    </div>
</template>

<script>
import service from '@/api';

export default {
    data() {
        return {
            courseInfo: {
                courseName: '',
                week: '',
                day: '',
                startPeriod: '',
                endPeriod: ''
            },
            studentList: []
        };
    },
    async created() {
        const courseId = this.$route.params.id;
        await this.fetchCourseInfo(courseId);
        await this.fetchStudentList(courseId);
    },
    methods: {
        async fetchCourseInfo(courseId) {
            this.courseInfo = await service.get(`/api/courses_schedule/${courseId}`, null, '获取课程信息');
        },
        async fetchStudentList(courseId) {
            const response = await service.get(`/api/attendance/${courseId}`, null, '获取学生列表');
            this.studentList = response.map(item => ({
                id: item.student.id,
                number: item.student.number,
                name: item.student.name,
                status: item.status
            }));
        }
    }
};
</script>

<style scoped>
h1 {
    margin-bottom: 20px;
}

.el-card {
    margin-bottom: 20px;
}
</style>